<template>
	<view class="content">

		<view class="header" style="background: #fff;">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px'}" class="stat"></view>

			<!-- 标题栏 -->
			<view class="title" :style="{ height: navigationBarHeight + 'px'}">
				<!-- <view class="title_search" @click="navTo('/package_travel/pages/search/search')"> -->
				
				<!-- 城市定位 -->
				<view class="location">
					<text>深圳</text>
					<image style="" src="https://image.szcits.cn/Public/App/image/search_button_destination@2x.png" alt="" />
				</view>
				
				<view class="title_search" @click="navTo('/package_travel/pages/search/search')">
					<!-- <view class="title_icon">
						<image style="width: 100%; height: 100%;"
							src="https://image.szcits.cn/Public/App/image/search_button_destination@2x.png" mode="">
						</image>
					</view> -->
					<view class="destination">
						目的地
					</view>
					<view class="btn">
						搜索
					</view>
				</view>
				<!-- 占位框,小程序胶囊 -->
				<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
				<view style="width: 200rpx;"></view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="width: 50rpx;"></view>
				<!-- #endif -->
			</view>
		</view>

		<!-- 空白占位,防止定位导致坍塌 -->
		<!-- <view :style="{ height: statusBarHeight + navigationBarHeight + 'px'}"></view> -->
		<!-- #ifdef H5 -->
		<view style="height: 10rpx;"></view>
		<!-- #endif -->
		<!-- 悬浮标题 -->
		<view :animation="animationData" class="nav-top" style="background: #fff;">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px'}" class="stat"></view>

			<!-- 标题栏 -->
			<view class="title" :style="{ height: navigationBarHeight + 'px'}">
				
				<!-- 城市定位 -->
				<view class="location">
					<text>深圳</text>
					<image style="" src="https://image.szcits.cn/Public/App/image/search_button_destination@2x.png" alt="" />
				</view>
				
				<view class="title_search" @click="navTo('/package_travel/pages/search/search')" style="background-color: #f8f8f8;">
					<!-- <view class="title_icon">
						<image style="width: 100%; height: 100%;"
							src="https://image.szcits.cn/Public/App/image/search_button_destination@2x.png" mode="">
						</image>
					</view> -->
					<view class="destination">
						目的地
					</view>
					<view class="btn">
						搜索
					</view>
				</view>
				<!-- 占位框,小程序胶囊 -->
				<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
				<view style="width: 200rpx;"></view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="width: 50rpx;"></view>
				<!-- #endif -->
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			title: {
				type: String
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navigationBarHeight: 0,
				animationData: {},
				animation: ''
			}
		},
		mounted() {
			// #ifndef MP-BAIDU
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.navigationBarHeight = getApp().globalData.navigationBarHeight
			// #endif
			// 百度小程序调用百度api获取状态栏高度
			// #ifdef MP-BAIDU
			this.statusBarHeight = swan.getSystemInfoSync().statusBarHeight
			this.navigationBarHeight = swan.getSystemInfoSync().navigationBarHeight
			// #endif
			// 定义动画
			this.animation = uni.createAnimation({
				// 动画持续时间
				duration: 1000,
				// 动画加速度
				timingFunction: 'ease',
			})

			// 监听页面滚动
			var that = this
			uni.$on('onPageScroll', function(data) {
				if (data >= 150) {
					that.opacity(1)
				} else {
					that.opacity(0)
				}
			})
		},
		methods: {
			opacity(a) {
				this.animation.opacity(a).step()
				this.animationData = this.animation.export()
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.location{
		display: flex;
		font-size: 24rpx;
		padding: 0 20rpx 0 0;
		image{
			width: 32rpx;
			margin:0rpx 0 0 10rpx;
			height: 32rpx;
		}
	}
	.header {
		// position: fixed;
		// z-index: 9999;
		// background: url('https://image.szcits.cn/Public/App/image/bgc.png');
		background-repeat: repeat;
		background-size: cover;
		//background: linear-gradient(281deg, #62D6ED 0%, #8EECEE 100%);
	}

	.nav-top {
		// background: #00d0ff;
		//height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		z-index: 99;
		//border-bottom: 1rpx solid #dcdcdc;
	}

	.stat {
		background-color: #fff;
		//color: #000;
		
		//position: fixed;
		//z-index: 1;
		height: var(--status-bar-height); // --status-bar-height系统状态栏高度
		width: 100%;
		//top: 0;
		//left: 0;
	}

	.navigation {
		width: 100%;
		display: flex;
		align-items: center;

		.logo {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 30rpx;
			color: #fff;
		}

		.search {
			background-color: #fff;
			border-radius: 100rpx;
			padding: 10rpx 10rpx 5rpx 10rpx;

			.t-icon {
				width: 36rpx;
				height: 36rpx;
			}

		}
	}

	.title {
		width: 750rpx;
		// height: 100rpx;
		padding: 0rpx 24rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: .9;

	}

	.title_search {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		background: #f6f6f6;
		border-radius: 86rpx 86rpx 86rpx 86rpx;


		.title_icon {
			float: left;
			width: 36rpx;
			height: 36rpx;
			// margin-top: 16rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding-top: 6rpx;
			// background: #999999;
		}

		.destination {
			float: left;
			font-size: 26rpx;
			padding-left: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.btn {
			float: right;
			width: 110rpx;
			height: 52rpx;
			text-align: center;
			line-height: 52rpx;
			margin-top: 4rpx;
			margin-right: 6rpx;
			//background: linear-gradient(270deg, #19A47E 0%, #76CDAA 100%);
			background: linear-gradient(270deg, #02a6ef 0%, #00d3ff 100%);
			border-radius: 116rpx 116rpx 116rpx 116rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

	}
</style>